<template>
    <div class="wrapper">
        <div class="side">
            <img src="/devices.png" alt="" />
            <Button :children="children"></Button>
        </div>
        <div class="content">
            <h2>Features</h2>
            <ul class="list">
                <li v-for="(item, index) in data" :key="index" @click="clickLi(index)">
                    <h3>{{ item.title }}</h3>
                    <div>
                        <p>{{ item.text }}</p>
                    </div>
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" focusable="false" role="img" width="16"
                        height="16">
                        <path d="M7.99805 16L7.99805 0" stroke="#030303" strokeWidth="1.5" strokeMiterlimit="10"></path>
                        <path d="M0 7.99805L16 7.99805" stroke="#030303" strokeWidth="1.5" strokeMiterlimit="10"></path>
                    </svg>
                </li>
            </ul>
        </div>
    </div>
</template>
<script setup>
import { reactive, ref } from 'vue';
import Button from './header/Button.vue'
import { gsap } from 'gsap'

const children = ref("Order SPARQ Diagnostics")
const data = reactive([
    {
        title: 'SPARQ A.I.',
        text: 'Interact directly with your car with Personalized Insights & Service Reminders that analysis from your past, present, and future data. Learns from your driving behavior, car specifications, and driving environment.',
    },
    {
        title: 'A.I. Powered Health Scoring System',
        text: "Effortless installation, unparalleled intelligence. Simply plug into your car's OBD II port to activate SPARQ Diagnostics'expertise seamlessly. Sparq diagnostics is compatible with most vehicles manufactured after 2010 by major car brands.",
    },
    {
        title: 'On-Demand Diagnostics',
        text: 'Remotely perform Real Time Diagnostics with the ability to detect +50K inspections on your car. Supports both Generic & Manufacturer Specific (OEM) codes',
    },
    {
        title: 'Individualized Car Component Health Status',
        text: 'A summary of the overall health status of major components of the your car. Providing deeper insights into different vehicle systems inside your car.',
    },
    {
        title: 'Vehicle Data Transfer',
        text: 'Transfer existing information about your vehicle from the SPARQ Ecosystem when you sell, transfer, or purchase a new car.',
    },
])

const clickLi = (index) => {
    const divElems = gsap.utils.toArray(".list div")
    const svgElems = gsap.utils.toArray(".list svg")

    // 修复判断逻辑：检查当前元素的高度是否为0或接近0
    const isClose = parseFloat(gsap.getProperty(divElems[index], 'height')) < 1

    gsap.to(divElems, {
        height: 0,
        ease: 'power2.in'
    })
    gsap.to(svgElems, {
        rotate: 0,
        ease: 'none'
    })

    if (isClose) {
        gsap.to(divElems[index], {
            height: 'auto',
            ease: 'power2.in'
        })
        gsap.to(svgElems[index], {
            rotate: 45,
            ease: 'none'
        })
    }
}

</script>
<style scoped>
.wrapper {
    display: flex;
    align-items: flex-start;
    padding: 50px;
}

.side {
    width: 20vw;

    img {
        width: 100%;
        border-radius: 30px;
        margin-bottom: 50px;
    }
}

.content {
    margin-left: 10vw;
    flex: 1;

    h2 {
        font-size: 2vw;
        font-weight: bold;
    }
}

.list {
    li {
        border-bottom: 1px solid #e5e5e5;
        padding: 2vw 0;
        position: relative;
        cursor: pointer;
    }

    h3 {
        font-size: 1vw;
        font-weight: bold;
    }

    div {
        overflow: hidden;
        height: 0;
    }

    p {
        margin-top: 2vw;
    }

    svg {
        position: absolute;
        right: 10px;
        top: 10px;
    }

    li:nth-of-type(1) div {
        height: auto;
    }

    li:nth-of-type(1) svg {
        transform: rotate(45deg);
    }
}
</style>